<template>
  <design-view class="rule-page">
    <div class="rule-container">
      <div class="panel">
        <div class="rule-body">
          <div class="wrapper" ref="scrollEl">
            <div class="content">
              <h3>一、活动时间：</h3>
              <div class="item">2024年4月30日上午9:00--5月31日中午12:00</div>
              <h3>二、征集要求：</h3>
              <div class="item">
                【口味王&和成天下520狂欢节“爱的故事”有奖征集】活动旨在征集用户与口味王/和成天下520狂欢节之间爱的故事，传播品牌文化，分享品牌故事。参与有奖征集活动须按以下要求提交“爱的故事”：<br/>
                A.故事及图片必须符合公序良俗和国家相关法律法规要求；<br/>
                B.故事应当与口味王或和成天下520狂欢节相关，契合“爱的故事”主题；<br/>
                C.故事应当真实感人，积极向上，内容原创，拒绝抄袭；（如因抄袭造成的侵权责任由用户自行承担）；<br/>
                D.故事应当精炼简洁，字数不超过300字。
              </div>
              <h3>三、活动规则：</h3>
              <div class="item">
                <p>1、2024年4月30日上午9:00--5月31日中午12:00，用户参与【口味王&和成天下520狂欢节“爱的故事”有奖征集】活动，即有机会抽取口味王/和成天下品牌定制礼品、口味王/和成天下Zippo联名限量款打火机、口味王/和成天下槟榔等礼品；先到先得，抽完即止。 (所有礼品均以实物为准，图片仅供参考)</p>
                <p>2、每位用户拥有1次活动参与机会，用户按征集要求成功提交故事后即可参与活动抽奖，不可重复参与。奖品在互动过程中进行抽取，具体中奖概率为:0.1%。(注意:中奖率为活动综合中奖率，根据过往活动数据计算得出，实际综合中奖率与当期活动参与用户数量有关，具有偶然性和随机性)。</p>
                <p>3、请中奖用户务必在活动中奖后的弹窗填写相关信息，未提交视为放弃本次中奖资格。实物奖品会根据预留地址信息，在活动结束后的一个月内陆续发出，请耐心等待。发放奖品需要用户填写有效的手机号码和地址，如若提供的信息有误，主办方将有权取消其中奖资格。</p>
                <p>4、【特别注意】用户参与有奖征集活动所提交图片、故事，品牌将在微博、微信等官方自媒体平台进行整理发布，用户参与活动确认提交即确认授权品牌发布，请知悉。</p>
                <p>5、本活动最终解释权归活动主办方所有。</p>
              </div>
              <h3>四、注意事项：</h3>
              <div class="item">
                <p>1、用户不得采取任何不正当或作弊的违规手段参与本活动，一经发现，湖南口味王集团有限责任公司有权限制或取消用户参与活动的资格，包括但不限于取消奖励、追讨用户已领取的奖励(或同等价值的现金)、限制登录/封禁账号等一种或者多种方式，并保留追究用户其他法律责任的权利。违规手段包括但不仅限于:<br/>
                  A.通过不正当手段参与活动。例如实施网络攻击伪造数据、用机器或软件模拟行为、批量注册等违规工具参与活动，与其他用户串通采取不正当手段谋取活动奖励等；<br/>
                  B.扰乱本活动秩序。例如操控多个账号参加活动，篡改设备数据，买卖用户账号，买卖活动权益，买卖领奖资格等；<br/>
                  C.千扰本平台正常运营。例如采用技术手段对本平台进行干扰、破坏、修改或施加其他影响；<br/>
                  D.利用本活动进行违法犯罪。例如利用本活动洗钱.套现、诈骗，或开展其他违反国家法律法规的活动；<br/>
                  E.其他违反法律法规，违背诚实信用原则，违反活动规则，或本平台认为的不正当手段。
                </p>
                <p>2、如因以下原因导致本活动不能正常举办、用户无法参与或参与失败、活动奖励发放错误等，本平台有权暂停或取消本活动，且不承担任何法律责任或不利后果:<br/>
                  A.不可抗力和情势变更，包括但不仅限于自然灾害,有权机关的政策要求，政府机关指令，重大事件影响等不能预见，不可避免、不能克服的情况，或其他客观情况变更导致本活动无法正常进行的情况；<br/>
                  B.本活动受到不正当技术手段干扰破坏、篡改或被施加其他影响，第三方平台限制本活动，或其他导致本活动的正常秩序受到干扰的情况；<br/>
                  C.用户所在地区网络故障、支付平台故障、电信运营商故障等非本平台所能控制的情况。
                </p>
                <p>3、本平台不支持用户通过众包或类似方式参与活动，不建议用户以付费的方式邀请他人以完成活动任务。如用户因此遭受经济损失的，本平台不承担任何赔偿或补偿责任。</p>
                <p>4、若由于用户自身原因（包括但不限于参与方式不合活动规则、操作不当造成产品功能故障等）导致无法实际享有奖励的，视为用户自愿放弃奖励，本平台将不会也无义务给予任何形式的补偿。</p>
                <p>5、任何第三方以本平台名义从事欺诈、违法行为造成用户损失的，本平台无需为此承担法律责任。</p>
                <p>6、在法律法规允许的范围内，本平台可以根据本活动的实际举办情况对活动规则进行变动或调整，相关变动或调整将公布在活动页面上公布后依法生效。用户继续参与活动则视为同意并接受变动或者调整后的活动规则。</p>
              </div>
            </div>
            <!-- custom-vertical-scrollbar-->
            <div class="custom-vertical-scrollbar" ref="vertical">
              <div class="custom-vertical-indicator"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-back  animate__animated animate__headShake animate__infinite" @click="onBack">返回</div>
    </div>
  </design-view>
</template>

<script>
import BScroll from '@better-scroll/core'
import ScrollBar from '@better-scroll/scroll-bar'

BScroll.use(ScrollBar)
export default {
  name: 'RuleView',
  mounted () {
    this.$nextTick(() => {
      this.createScroll()
    })
  },
  methods: {
    // 返回
    onBack () {
      this.$emit('update:show', false)
      this.$emit('toggle')
      this.$sound && this.$sound.play()
    },
    // 创建滚动条
    createScroll () {
      this.scroll = new BScroll(this.$refs.scrollEl, {
        scrollY: true,
        scrollbar: {
          fade: false,
          interactive: true,
          customElements: [this.$refs.vertical]
        },
        bindToWrapper: true
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/mixin.scss";

.rule-container {
  display: flex;
  flex-direction: column;
  justify-content: center;;
  align-items: center;
  @include abs_center();
}

.panel {
  @include wh(630, 744);
  background: url(../assets/img/index/rule_bg.png) center;
  background-size: 100% 100%;
  padding: 92px 11px 39px 39px;
}
.rule-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  color: #7b3a3a;
  font: {
    size: 20px;
    family: AlibabaPuHuiTiR;
  };
  line-height: 25px;
  overflow: hidden;
  h3 {
    font-size: 18px;
  }
  .item {
    margin-bottom: 25px;
    p {
      margin-bottom: 25px;
    }
  }
  .content {
    padding-right: 40px;
    font-family: HarmonyOS_Sans_SC_Regular;
  }
  .custom-vertical-scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 6px;
    border-radius: 6px;
    background-color: transparent;
  }

  .custom-vertical-indicator {
    width: 100%;
    height: 206px;
    border-radius: 6px;
    background-color: #a00d14;
  }
}
.btn-back {
  @include wh(479, 88);
  background: url(../assets/img/second/btn_bg.png) center no-repeat;
  background-size: 100% 100%;
  font-size: 40px;
  color: #fff;
  line-height: 88px;
  text-align: center;
  margin: 80px auto 0;
}
</style>
